<!DOCTYPE html>
<html>
<head>
	<title>鼠标移上动画</title>
	<meta  charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="../joyKit.css">
	<link rel="stylesheet/less" type="text/css" href="index.less">
	<script src="https://cdn.bootcss.com/less.js/3.0.0-pre.4/less.min.js"></script>
</head>
<body>
	<div class="iframe">
		<section class="sec sec1 xh-screen">
			<ul class="xh-row xh-text-center">
				<li class="col-md-6">
					<div class="h-item circle effect1"> <!--正圆 需要等比例图-->
						<a href="#">
							<span class="spin"></span>
							<span class="img">
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510824730769&di=5475fa6d7174eece347311980c028c5c&imgtype=0&src=http%3A%2F%2Fimg1.touxiang.cn%2Fuploads%2F20120828%2F28-023524_440.jpg" alt="樱花"/>
							</span>
							<div class="info">
								<div class="info-back tranform-center">
									<h3 class="xh-color-fff">樱花</h3>
									<p class="xh-color-999">Cherry blossoms</p>
								</div>
							</div>
						</a>
					</div>
				</li>
				<li class="col-md-6">
					<div class="h-item circle effect1"> <!--正圆 需要等比例图-->
						<a href="#">
							<span class="spin"></span>
							<span class="img">
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510824730769&di=5475fa6d7174eece347311980c028c5c&imgtype=0&src=http%3A%2F%2Fimg1.touxiang.cn%2Fuploads%2F20120828%2F28-023524_440.jpg" alt="樱花"/>
							</span>
							<div class="info">
								<div class="info-back tranform-center">
									<h3 class="xh-color-fff">樱花</h3>
									<p class="xh-color-999">Cherry blossoms</p>
								</div>
							</div>
						</a>
					</div>
				</li>
			</ul>
		</section>
		<section class="sec sec2 xh-screen">
			<ul class="xh-row xh-text-center">
				<li class="col-md-6">
					<div class="h-item circle effect2 left-to-right">
						<a href="#">
							<span class="img">
								<img src="http://gudh.github.io/ihover/dist/images/assets/4.jpg" alt="树林"/>
							</span>
							<div class="info">
								<div class="info-back tranform-center">
									<h3 class="xh-color-fff">樱花</h3>
									<p class="xh-color-999">Cherry blossoms</p>
								</div>
							</div>
						</a>
					</div>
				</li>
				<li class="col-md-6">
					<div class="h-item circle effect2 left-to-right overflow-auto">
						<a href="#">
							<span class="img">
								<img src="http://gudh.github.io/ihover/dist/images/assets/4.jpg" alt="树林"/>
							</span>
							<div class="info">
								<div class="info-back tranform-center">
									<h3 class="xh-color-fff">樱花</h3>
									<p class="xh-color-999">Cherry blossoms</p>
								</div>
							</div>
						</a>
					</div>
				</li>
			</ul>
		</section>
		<section class="sec sec3 xh-screen">
			<ul class="xh-row xh-text-center">
				<li class="col-md-6">
					<div class="h-item circle effect3">
						<a href="#">
							<span class="img">
								<img src="http://gudh.github.io/ihover/dist/images/assets/6.jpg" alt="梨花"/>
							</span>
							<div class="info">
								<div class="info-back tranform-center">
									<h3 class="xh-color-fff">梨花</h3>
									<p class="xh-color-999">Cherry blossoms</p>
								</div>
							</div>
						</a>
					</div>
				</li>
				<li class="col-md-6">
					<div class="h-item circle effect3">
						<a href="#">
							<span class="img">
								<img src="http://gudh.github.io/ihover/dist/images/assets/6.jpg" alt="梨花"/>
							</span>
							<div class="info">
								<div class="info-back tranform-center">
									<h3 class="xh-color-fff">梨花</h3>
									<p class="xh-color-999">Cherry blossoms</p>
								</div>
							</div>
						</a>
					</div>
				</li>
			</ul>
		</section>
		<section class="sec sec4 xh-screen">
			<ul class="xh-row xh-text-center">
				<li class="col-md-6">
					<div class="h-item circle effect4 left-to-right"><!--控制多个动画可以使用多个div嵌套加延迟-->
						<a href="#">
							<div class="img-container">
								<span class="img">
									<img src="http://gudh.github.io/ihover/dist/images/assets/6.jpg" alt="梨花"/>
								</span>
							</div>
							<div class="info-container">
								<div class="info">
									<div class="info-back tranform-center">
										<h3 class="xh-color-fff">梨花</h3>
										<p class="xh-color-999">Cherry blossoms</p>
									</div>
								</div>
							</div>
						</a>
					</div>
				</li>
				<li class="col-md-6">
					<div class="h-item circle effect4 left-to-right"><!--控制多个动画可以使用多个div嵌套加延迟-->
						<a href="#">
							<div class="img-container">
								<span class="img">
									<img src="http://gudh.github.io/ihover/dist/images/assets/6.jpg" alt="梨花"/>
								</span>
							</div>
							<div class="info-container">
								<div class="info">
									<div class="info-back tranform-center">
										<h3 class="xh-color-fff">梨花</h3>
										<p class="xh-color-999">Cherry blossoms</p>
									</div>
								</div>
							</div>
						</a>
					</div>
				</li>
			</ul>
		</section>
	</div>
</body>
</html>